<template>
  <div class="container">
    <!-- 左边区域 -->
    <div class="left">
      <el-input v-model="searchQuery" placeholder="请输入组织名称" style="width:200px;" size="small" class="tree-search"
        @keydown.enter.native="searchOrg" suffix-icon="el-icon-search"></el-input>

      <!-- 渲染每个树形结构 -->
      <tree-item v-for="oid in oidList" :key="oid" :item="orgTreeData[oid]" :searchQuery="searchQuery"
        @node-selected="handleNodeSelected" :selectedNodeOid="selectedOid" :parent="orgTreeData[oid]"></tree-item>
    </div>

    <!-- 右边区域 -->
    <div class="right">
      <div class="right-top">
        <organization-chart class="org-chart" :fatherName="selectedTitle" :oid="selectedOid" />
      </div>
      <div class="right-bottom">
        <SearchTable class="s-table" :pageSize="5" :fatherName="selectedTitle" :soid="selectedOid" :sid="selectedSid" />
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import OrganizationChart from './cp_organizationChart.vue';
import TreeItem from './cp_treeItem.vue';
import SearchTable from './cp_SearchTable.vue';

export default {
  name: 'ThreeSectionLayout',
  components: {
    OrganizationChart,
    TreeItem,
    SearchTable,
  },
  data() {
    return {
      uid: '',
      oidList: [], // 保存所有oid
      childName: '',
      fatherName: '',
      orgTreeData: {}, // 用于存储每个oid对应的树形数据
      selectedTitle: '',
      selectedOid: '',
      selectedSid: '',
      searchQuery: '', // 全局搜索框的输入
    };
  },
  methods: {
    // 获取列表组织
    async getList() {
      try {
        const { data: res } = await this.$http.get('/org/selectbyuid', {
          params: {
            uid: this.uid,
            pageNum: 1,
            pageSize: 1000,
          }
        });

        // 获取所有的oid并保存
        this.oidList = res.data.map(item => item.oid); // 保存所有oid的列表

        console.log('uid:', this.uid);
        console.log('fatherName:', this.fatherName);
        console.log('childName:', this.childName);
        console.log('oidList', this.oidList);

        // 现在为每个oid获取树形数据
        this.oidList.forEach(oid => {
          this.fetchData(oid);  // 为每个oid获取树形数据
        });
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    },

    // 获取树形数据
    async fetchData(oid) {
    try {
        const { data: res } = await axios.get('/org/fullorgtree', {
            params: { oid },
        });
        // 将 nodes 直接作为树形结构数据
        const treeData = res.nodes;
        
        // 为每个节点设置父节点信息
        const addParentToChildren = (node, parent = null) => {
            node.parent = parent;
            if (node.children) {
                node.children.forEach(child => addParentToChildren(child, node));
            }
        };
        
        treeData.forEach(rootNode => addParentToChildren(rootNode)); // 处理根节点下的所有子节点

        // 保存带有父节点信息的树形数据
        this.$set(this.orgTreeData, oid, treeData);
    } catch (error) {
        console.error('Error fetching tree data for oid:', oid, error);
    }
},

    // 处理节点选择
    handleNodeSelected({ title, oid, selectedSid }) {
      console.log('Selected title:', title);
      console.log('Selected oid:', oid);
      console.log('Parent selectedSid:', selectedSid);

      this.selectedTitle = title; // 更新标题
      this.selectedOid = oid; // 更新oid
      this.selectedSid = selectedSid || ''; // 更新父级sid，如果没有则为空
    },

    // 初始化数据
    initData() {
      this.uid = sessionStorage.getItem('uid');
      this.fatherName = this.$route.query.fatherName;
      this.soid = this.$route.query.oid;
    },
  },
  created() {
    this.uid = window.sessionStorage.getItem('uid');
    this.childName = window.sessionStorage.getItem('childName');
    this.fatherName = window.sessionStorage.getItem('fatherName');
    this.initData();
    this.getList();
  },
};
</script>


<style scoped>
.container {
  display: flex;
  height: 100vh;
}

.left {
  width: 250px;
  background-color: #ffffff;
  padding: 20px;
  box-sizing: border-box;
  margin-top: 20px;
  border: 2px solid #f3f3f3;
}

.right {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.right-top {
  height: 450px;
  /* 设置固定高度，确保区域缩小 */
  background-color: #ffffff;
  padding: 0px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.right-bottom {
  height: 450px;
  background-color: #ffffff;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* .org-chart {
  width: 100%;  
  height: 100%; 
  transform: scale(0.5); 
  transform-origin: top; 
} */

.org-chart {
  width: 100%;
  height: 100%;
  transform: scale(1.04, 0.8);
  transform-origin: top center;
}

.s-table {
  width: 100%;
  height: 100%;
  transform: scale(1.08, 0.8);
  transform-origin: top center;
}
</style>